
<template>
  <div id="main1" style="width: 100%;height: 100%;"></div>
</template>

<script>
import 'echarts-liquidfill'
import * as echarts from 'echarts'
export default {
  name: 'projectCycle',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',

    }
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main1'))
      // 绘制图表
      myChart.setOption(
        {
          title: {
            text: '项目周期',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{b}:{d}%"
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: [
                { value: 100, name: '项目立项' },
                { value: 200, name: '项目报备' },
                { value: 1500, name: '项目研发' },
                { value: 200, name: '项目测试' },
                { value: 300, name: '项目推广' }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
      )
      window.addEventListener('resize', function () {
        myChart.resize()
      })


    },
  }
}

</script>
